import React from 'react'
import { createRoot } from 'react-dom/client'

// #1 首字母大写
class Hello extends React.Component {
  // 必须提供 render 函数
  render() {
    // 必须 return，return 啥表示渲染啥
    // this => 组件实例
    return <h1>Hello React</h1>
  }
}

// #2 使用，单标签闭合或双标签
// render 渲染类组件的过程？
// render 函数解析标签
// 发现是大写字母开头的，会当做组件进行解析
// 又发现是一个类组件，内部会 new Hello() 得到一个【实例】
// 调用 实例.render() 方法得到 JSX
// JSX 经过 Babel 转成 React.createElement() 函数调用的形式
// React.createElement() 的返回值是虚拟 DOM
// app.render 负责把虚拟 DOM 转成真实 DOM 渲染到 #root 内
const app = createRoot(document.querySelector('#root'))
app.render(<Hello />)
